<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<<meta name="save" content="history">
	<style>
	body{
		background-color:pink;
		 
		  
		    
}
		#root{
	
width: 200px;
height: 100px;
position: absolute;
top: 370px;
left: 45%;
		}
		
		#table{
			position: absolute;
			left: 300px;
			top: 50px;
		}
		
		#an{
			position: absolute;
			left: 54%;
			top: 50%;
		}
	</style>
</head>
<body>

<div id="root">
	<form onsubmit="return submitTable()">

			<div>姓名：<input  type="text" id="name" ></div>
			<div>性别：<input  type="text" id="sex" ></div>
			<div>年龄：<input  type="number" id="age" ></div>
			<div>段位：<input  type="text" id="garde"></div>
		</div>
		<div id="an">
	
			<input name="submit" type="button" id="submit" value="添加" onclick="return fm()">
			
			<input name="submit" type="button" id="submit" value="确定" onclick="return submitTable()">
		</div>
		
		<table border="1" width="50%" align="center" id="table">

			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>段位</th>
			</tr>

		</table>
</body>
		
	</form>

	<script>

		// var html="<table border=1>";
		// html+="<tr><td>"+'姓名'+"</td><td>"+'性别'+"</td><td>"+'年龄'+"</td><td>"+'段位'+"</td></tr>";
		// document.body.innerHTML=html;

		document.getElementById("root").style.display="none";
		function fm(){
			var tb=document.getElementById("root");
			document.getElementById("root").style.display="";
		}

		function submitTable(){

			var name = document.getElementById("name").value;

			var sex = document.getElementById("sex").value;

			var age = document.getElementById("age").value;

			var garde = document.getElementById("garde").value;

			row = document.getElementById("table").insertRow();

			if(row!=null){

				cell=row.insertCell();

				cell.innerHTML=name;

				cell = row.insertCell();

				cell.innerHTML=sex;

				cell = row.insertCell();

				cell.innerHTML=age;

				cell = row.insertCell();

				cell.innerHTML=garde;

			}

			return false;
		}
		
	</script>

</body>
</html>

